<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" th:href="@{/favicon/favicon.ico}">

    <title>登录</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/jQuery-1.12.4/jquery-1.12.4.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

    <script type="text/javascript">
      function getGifCode(){
        document.getElementById("gifImageCode").src="getGifCode?"+new Date().getTime();
      }
      function submitForm() {
        var str = $("#code").val();
        if(str.length != 4){
          $("#p").html("错误的验证码")
          return false;
        }else {
          return true;
        }
      }
    </script>
  </head>
  <body>

  <div style="padding-top: 8%;"></div>

    <div class="container">

      <form class="form-signin" action="/userLogin" method="post" id="loginFrom" onsubmit="return submitForm()">
        <h2 class="form-signin-heading" style="text-align: center">验证码测试</h2>
        <label class="sr-only">用户名：</label>
        <input type="text" id="userName" name="userName" class="form-control" placeholder="请输入用户名">
        <label class="sr-only">密码：</label>
        <input type="password" id="passWord" name="passWord" class="form-control" placeholder="请输入密码">
        <label class="sr-only">验证码：</label>
        <div>
            <img id="gifImageCode" src="getGifCode" onclick="getGifCode()">
        </div>
        <input type="text" id="code" name="code" class="form-control" placeholder="请输入验证码">
        <div style="margin-left: 10px;">
          <p th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" style="padding-top: 10px;color: red;"></p>
          <p th:if="${#strings.isEmpty(msg)}" style="padding-top: 10px;color: red;" id="p"></p>
          <div style="height: 5px;"></div>
        </div>
        <input class="btn btn-lg btn-primary btn-block" type="submit"  value="登录" id="submitform">
      </form>
    </div>
  </body>
</html>
